:root {
  --vd-color-text: #333;
  --vd-color-text-weak: #666;
  --vd-color-text-weakest: #aaa;
  --vd-color-accent: #058136;
  --vd-color-number: #0e00ab;
  --vd-color-string: #c40e0e;
  --vd-color-boolean: #8d40d0;
  --vd-border-color: #ccc;
  --vd-color-bg-pane: #f5f5f5;
  --vd-color-selected-border: #0f2fff;
  --vd-color-guide-margin: rgba(249, 205, 158, 0.5);
  --vd-color-guide-border: rgba(254, 232, 183, 0.4);
  --vd-color-guide-padding: rgba(195, 207, 138, 0.3);
  --vd-color-unresolved: rgba(119, 166, 255, 0.3);
  --vd-font-size: 16px;
  --vd-font-size-small: 12px;
  --vd-font-size-large: 20px;
}

body {
  padding: 0;
  margin: 0;
  background-color: #ddd;
}

.vd-reset {
  all: initial;
  font-family: sans-serif;
  font-size: var(--vd-font-size);
  color: var(--vd-text-color);
}

.vd-reset *,
.vd-reset *::before,
.vd-reset *::after {
  box-sizing: border-box;
}
